<template>
	<view class="vip">
		<view class="danmu">
			<u-notice-bar icon='' :custom-style="{backgroundColor:'rgba(0,0,0,0)'}" :text="danmu" color="#fff" direction='column'></u-notice-bar>
		</view>
		
		<view class="vipTitle">
			<image class="left" src="../../static/newicons/Frame-text.png" mode="aspectFit"></image>
			<image class="vipicon" src='/static/newicons/Frame.png' mode="aspectFit"></image>
			<image class="vipicon1" src='/static/newicons/Frame-4.png' mode="aspectFill"></image>
		</view>
		<view class="ablitilys padding">
			<customTitle>其他</customTitle>
			<view class="abItem" v-for='item in ablitilys' :key='item.name'>
				<image :src="item.icon" class='icon' mode='aspectFit'></image>
				<view class="cont">
					<view class="name">{{item.name}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</view>
		</view>
		
		<view class="packages">
			<customTitle>VIP限时充值优惠</customTitle>
			<!-- <view class="lastTime">支付剩余时间
				<u-count-down @change='countChange' :time="30 * 60 * 60 * 1000" format="HH:mm:ss">
					<view class="customTime">
						<text class="customItem">{{hours}} : </text>
						<text class="customItem">{{minutes}} : </text>
						<text class="customItem">{{seconds}}</text>
					</view>
				</u-count-down>
			</view> -->
			<scroll-view class="row" scroll-x>
				<vipItem v-for='item in packages' :key='item.name' :data="item" :active='item.vipId === vipItem.vipId' @choose='chooseThis'>
				</vipItem>
			</scroll-view>
		</view>
		
		<view class="fixed">
			<view class="openVipBtn" @click='pay'>
				{{userInfo.maxEffectDay ? '立即续费' : '立即解锁'}}
			</view>
			<safeBottom></safeBottom>
		</view>
		
		<u-popup :show="show" mode="bottom" round="16" close-on-click-overlay @close="show = false">
			<view class="pop">
				<view class="popTitle">选择支付方式</view>
				<view class="methodItem" hover-class="hover" v-for="item in payMethod" :key="item.name" @click="handlePay(item)">
					<image class="methodIcon" :src="item.icon" mode="aspectFit"></image>
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<safeBottom></safeBottom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				payMethod:[
					// {icon:'/static/pay/wechat.png',name:'微信支付'},
					{icon:'/static/pay/zfb.png',name:'支付宝支付'},
				],
				danmu:[],
				packages: [],//套餐
				ablitilys: [
					{name:'无限次数使用',icon: '/static/newicons/Frame-1.png',desc:'官方最新模型，消息秒回，超出人类智慧'},
					{name:'解锁所有模型',icon: '/static/newicons/Frame-2.png',desc:'您的工作AI帮你完成，写计划，写报告，想灵，感统 统搞定'},
					{name:'持续享用更多AI能力',icon: '/static/newicons/Frame-3.png',desc:'VIP专属通道，更高清，更快速'},
				],//vip权益
				vipItem: '',//选中的vip套餐
				time:{hours: 0, minutes: 0, seconds: 0}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			hours() {
				return this.time.hours > 9 ? this.time.hours : `0${this.time.hours}`
			},
			minutes() {
				return this.time.minutes > 9 ? this.time.minutes : `0${this.time.minutes}`
			},
			seconds() {
				return this.time.seconds > 9 ? this.time.seconds : `0${this.time.seconds}`
			},
		},
		onLoad() {
			this.getPackages()
			this.getDanmu()
		},
		methods: {
			handlePay(item) {
				if(item.name === '微信支付') {
					this.$request({
						url:'/api/getConfig',
						method:'get'
					},true).then(res => {
						
					})
				}else {
					this.$request({
						url:'/api/alipayXiaDan',
						method:'post',
						data: {
							unionid: this.$store.state.userInfo.unionid,
							type:this.vipItem.vipId,
							amount:(this.vipItem.activeVipPrice || this.vipItem.vipPrice)*10*10,//分
							subject:16,
						}
					},true).then(res => {
						console.log(res,'res')
						uni.requestPayment({
							provider:'alipay',
							orderInfo:res.orderStr,
							success:() => {
								uni.showToast({
									title:'支付成功',
								})
								this.show = false;
								this.$store.dispatch('getUserInfo')
							},
							fail() {
								uni.showToast({
									title:'支付失败',
									icon: 'none'
								})
							}
						})
					})
				}
			},
			pay() {
				if(!this.vipItem) {
					uni.showToast({
						title: '请选择套餐！',
						icon: 'none'
					})
					return
				}
				this.show = true;
			},
			chooseThis(item) {
				this.vipItem = item
			},
			countChange(e) {
				this.time = e
			},
			// 获取充值弹幕
			getDanmu() {
				this.$request({
					url:'/api/v1/miletus/user/func/mockvip',
					method:'get'
				}).then(res => {
					this.danmu = res
				})
			},
			// 获取vip套餐
			getPackages() {
				this.$request({
					url:'/api/v1/miletus/user/func/vipinfo',
					method:'get'
				}).then(res => {
					this.packages = res
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hover {
		background-color: rgba(0, 0, 0, 0.1);
	}
.vip {
	padding: 10rpx 30rpx 200rpx;
	box-sizing: border-box;
	overflow-x: hidden;
	.danmu {
		margin-bottom: 10rpx;
	}
	.vipTitle {
		display: flex;
		padding-top: 46rpx;
		padding-bottom: 27rpx;
		padding-right: 10rpx;
		margin-top: 10rpx;
		position: relative;
		.left {
			width: 204rpx;
			height: 84rpx;
		}
		.vipicon {
			position: absolute;
			width: 262rpx;
			height: 247rpx;
			right: 30rpx;
			top: -10rpx;
			z-index: 2;
		}
		.vipicon1 {
			position: absolute;
			width: 491rpx;
			height: 157rpx;
			right: -80rpx;
			top: 0;
			z-index: 1;
		}
	}
	.padding {
		padding: 25rpx;
		border-radius: 20rpx;
		background: #29283A;
		box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.51);
		margin-bottom: 20rpx;
	}
	.ablitilys {
		.abItem {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			&+.abItem {
				margin-top: 45rpx;
			}
			.icon {
				$s: 62rpx;
				width: $s;
				height: $s;
				margin-right: 26rpx;
			}
			.cont {
				.name {
					font-size: 30rpx;
					color: #fff;
					margin-bottom: 10rpx;
				}
				.desc {
					font-size: 24rpx;
					color: #fff;
					opacity: 0.58;
				}
			}
		}
	}
	.packages {
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
		padding-bottom: 0;
		.lastTime {
			position: absolute;
			right: 0;
			top: 0;
			background: linear-gradient(0deg, #FFB658 0%, #FFDBA0 99%);
			box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.35);
			border-radius: 0 0 0 20rpx;
			font-size: 24rpx;
			color: #5F3A19;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 5rpx 10rpx;
			.customTime {
				padding-left: 10rpx;
				font-size: 28rpx;
				.customItem {
					color: #5F3A19;
					font-weight: 600
				}
			}
		}
		.row {
			margin-top: 30rpx;
			white-space: nowrap;
		}
	}
	
	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		padding: 23rpx 30rpx 60rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #181824 0%, #0A0A11 100%);
	}
	.openVipBtn {
		$h: 85rpx;
		height: $h;
		line-height: $h;
		border-radius: math.div($h,2);
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		color: #080808;
		font-weight: 600;
		background: linear-gradient(0deg, #59DEE1 0%, #57E68D 99%);
		.lock {
			width: 36rpx;
			height: 42rpx;
			margin-right: 12rpx;
		}
	}
	.pop {
		padding: 30rpx;
		.popTitle {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 20rpx;
			text-align: center;
		}
		.methodItem {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			padding: 20rpx 0;
			&:nth-last-child(1) {
				border-top: 2rpx solid rgba(0,0,0,0.1);
			}
			.methodIcon {
				$s: 60rpx;
				width: $s;
				height: $s;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
